<template>
    <div class="system-login">
        <div class="box">
            <div class="login-content-left">
                <img :src="loginLeftPng">
                <div class="login-content-left-mask">
                    <div>后台管理系统</div>
                    <div>时间不在于你拥有多少,而在于你怎样使用。</div>
                </div>
            </div>

            <div class="box-inner">
                <h1>欢迎登录</h1>
                <el-form class="form">
                    <el-input v-model="form.name" size="large" placeholder="用户名" type="text" maxlength="50">
                        <template #prepend>
                            <i class="iconfont icon-user" />
                        </template>
                    </el-input>
                    <el-input v-model="form.password" size="large" :type="passwordType" placeholder="密码" name="password" maxlength="50">
                        <template #prepend>
                            <i class="iconfont icon-mima" />
                        </template>
                        <template #append>
                            <i
                                class="iconfont password-icon"
                                :class=" passwordType ? 'icon-yanjing_yincang' : 'icon-yanjing_xianshi' "
                                @click="passwordTypeChange"
                            />
                        </template>
                    </el-input>
                    <div class="mt-[-15px] mb-[5px] text-align-left">
                        <el-checkbox v-model="remember" size="large">记住密码</el-checkbox>
                    </div>
                    <el-button type="primary" :loading="form.loading" class="w-full" size="default" @click="handleSubmit">登录</el-button>
                </el-form>
                <div class="fixed-top-right" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import loginLeftPng from "~/assets/login/left.jpg";
import { ElMessage } from "~/config/element";

defineOptions({
    name: "Login",
    inheritAttrs: true
});

const userStore = useUserStore();

const loginStorage = useStorage("LOGIN_INFO", { success: false, account: "", password: "" });
const remember = ref(loginStorage.value.success);
const isMd5Pwd = ref(loginStorage.value.success);

const form = reactive({
    name: loginStorage.value.account,
    password: loginStorage.value.password,
    loading: false
});
const passwordType = ref("password");

watch(() => form.password, () => {
    isMd5Pwd.value = false;
});

function passwordTypeChange() {
    passwordType.value === "" ? (passwordType.value = "password") : (passwordType.value = "");
}

function checkForm() {
    return new Promise((resolve) => {
        if (form.name === "") {
            ElMessage.warning({
                message: "用户名不能为空",
                type: "warning"
            });
            return;
        }
        if (form.password === "") {
            ElMessage.warning({
                message: "密码不能为空",
                type: "warning"
            });
            return;
        }
        resolve(true);
    });
}
function handleSubmit() {
    checkForm().then(() => {
        form.loading = true;
        const params = {
            name: form.name,
            password: form.password,
            isMd5: isMd5Pwd.value
        };
        loginStorage.value = {
            success: false,
            account: "",
            password: ""
        };
        userStore.login(params)
            .then(async (status) => {
                if (status.success) {
                    await ElMessage.success({
                        message: "登录成功",
                        type: "success"
                    });
                    if (remember.value) {
                        loginStorage.value = {
                            success: true,
                            account: form.name,
                            password: isMd5Pwd.value ? form.password : stickUtils.toMd5(form.password)
                        };
                    }
                    location.reload();
                } else {
                    ElMessage.error({
                        message: status.message || "登录失败",
                        type: "error"
                    });
                }
            })
            .finally(() => {
                form.loading = false;
            });
    });
}
</script>
